<template>
    <el-col class="border padd20">
        <CurrentDate title="劳动实践占比数" style="z-index: 1000000;" />
        <div id="main" class="" style="width: 100%;height: 220px;" v-if="ldsj.length!=0"></div>
        <el-col class="box box-align-center box-pack-center" style="width: 100%;height: 194px;" v-else>暂无数据</el-col>
    </el-col>
</template>

<script>
    import * as echarts from 'echarts';
    import CurrentDate from "./CurrentDate.vue";
    export default {
        components: {
            CurrentDate
        },
        props: {
            ldsj: {
                type: Array,
                default: []
            }
        },
        data() {
            return {

            }
        },

        methods: {
            init() {
                var chartDom = document.getElementById('main');
                var myChart = echarts.init(chartDom);
                var option;
                if (this.ldsj.length != 0) {
                    var datas = []
                    datas.push(this.ldsj.map(res=>{return {name:res.name,value:res.percent}}))
                    option = {
                        color:['#ee6664','#5770c2', '#fac656','#93ca73', '#f9c956','#75bedc'],
                        title: {
                            text: '',
                            left: 'center',
                            textStyle: {
                                color: '#999',
                                fontWeight: 'normal',
                                fontSize: 14
                            }
                        },
                        series: datas.map(function(data, idx) {
                            var top = idx * 33.3;
                            return {
                                type: 'pie',
                                radius: [20, 60],
                                top: top + '%',
                                height: '33.33%',
                                left: 'center',
                                width: 400,
                                itemStyle: {
                                    borderColor: '#fff',
                                    borderWidth: 1
                                },
                                label: {
                                    alignTo: 'edge',
                                    formatter: '{name|{b}}\n{time|{c} }',
                                    minMargin: 5,
                                    edgeDistance: 10,
                                    lineHeight: 15,
                                    rich: {
                                        time: {
                                            fontSize: 10,
                                            color: '#999'
                                        }
                                    }
                                },
                                labelLine: {
                                    length: 15,
                                    length2: 0,
                                    maxSurfaceAngle: 80
                                },
                                labelLayout: function(params) {
                                    const isLeft = params.labelRect.x < myChart.getWidth() / 2;
                                    const points = params.labelLinePoints;
                                    // Update the end point.
                                    points[2][0] = isLeft ?
                                        params.labelRect.x :
                                        params.labelRect.x + params.labelRect.width;
                                    return {
                                        labelLinePoints: points
                                    };
                                },
                                data: data
                            };
                        })
                    };
                }


                option && myChart.setOption(option);
                window.addEventListener("resize", () => {
                    if (myChart) {
                        myChart.resize()
                    }
                })
                window.onresize = myChart.resize;
            }
        }
    }
</script>
<style scoped>
    @import './com.scss';
</style>
<style>
</style>
